<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			[v-cloak]{
				display: none;
			}
			.main{
				width: 125px;
			}
			button{
				display: block;
				width: 100%;
				color: #fff;
				background: #39f;
				border: 0;
				padding: 6px;
				text-align: center;
				font-size: 12px;
				border-radius: 4px;
				cursor: pointer;
				outline: none;
				position: relative;
				top: 1px;
				left: 1px;
			}
			.dropdown{
				width: 100%;
				height: 150px;
				margin: 5px 0;
				font-size: 12px;
				background: #fff;
				border-radius: 4px;
				box-shadow: 0 1px 6px rgba(0,0,0,.2);
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="main" v-clickoutside="handleClose">
				<button @click="show=!show">点击显示下拉菜单</button>
				<div class="dropdown" v-show="show">
					<p>下拉框的内容，点击外部区域可以关闭</p>
				</div>
			</div>
		</div>
		<script src="js/vue2.5.js"></script>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					show:false
				},
				methods:{
					handleClose(){
						this.show = false;
					}
				},
				directives:{
					clickoutside:{
						bind(el,binding){
							function documentHandler(e){
								if(el.contains(e.target)){
									return false;
								}
                                if(binding.expression){
                                	binding.value(e);
                                }
							}
							el._vueClickOutside_ = documentHandler;
							document.addEventListener('click',documentHandler);
						},
						unbind(){
							document.removeEventListener('click',el._vueClickOutside_);
							delete el._vueClickOutside_;
						}
					}
				}
			})
		</script>
	</body>
</html>
